<!-- 年规 - 客户规划 - 新增/编辑 -->
<template>
  <view>
    <view class="px-3.75 pt-3 pb-25">
      <view class="flex justify-between items-center text-28 c-#999">
        <view>币种：{{ currencyName }}</view>
        <view @click="onChargeUserClick">
          <text>负责人：</text>
          <text class="c-primary">{{ formData.chargeUser?.nickname || '待添加' }}</text>
        </view>
      </view>
      <view class="card-grey flex items-center mt-3.75">
        <view class="flex-shrink-0 w-200 c-#333">新客户目标</view>
        <u-input v-model="formData.new_customer" class="flex-1" placeholder="请输入" type="digit" />
      </view>
      <view class="card-grey flex items-center mt-2">
        <view class="flex-shrink-0  w-200 c-#333">业绩目标（万）</view>
        <u-input v-model="formData.new_customer_target" class="flex-1" placeholder="请输入" type="digit" />
      </view>
      <!-- 新客户获客渠道 -->
      <view class="py-3 text-40 c-#333 font-600">新客户获客渠道</view>
      <view class="card-grey">
        <view v-for="(item, index) in formData.customer_channel" :key="index"
          class="flex items-center text-28 u-border-bottom">
          <view class="flex-shrink-0 w-200 c-#333">渠道说明</view>
          <u-input v-model="item.content" class="flex-1" placeholder="请输入" :customStyle="{ fontSize: '28rpx' }" />
          <view class="flex-shrink-0 flex items-center pl-2" :class="[{ 'opacity-50 pointer-events-none': index == 0 }]"
            @click="onCustomerChannelDelete(index)">
            <u-icon name="close-circle-fill" color="#F4AF22" size="28" />
            <view class="ml-1.25 c-primary">删除</view>
          </view>
        </view>
        <view class="flex justify-center items-center py-2.5" @click="onCustomerChannelAdd">
          <u-icon name="plus-circle-fill" color="#F4AF22" size="28" />
          <view class="ml-1.25 c-primary">添加渠道说明</view>
        </view>
      </view>
      <!-- 现有核心市场（TOP5） -->
      <view class="py-3 text-40 c-#333 font-600">现有核心市场（TOP5）</view>
      <view class="card-grey">
        <view v-for="(item, index) in formData.core_market" :key="index" class="py-3 c-#333 u-border-bottom">
          <view class="flex items-center">
            <view class="flex-shrink-0 w-186">TOP{{ index + 1 }}</view>
            <view class="flex-1 flex items-center" @click="onCountryClick('core_market', index)">
              <view class="flex-1 text-maxline-1">{{ item.nation || '请选择国家' }}</view>
              <u-icon class="flex-shrink-0" name="arrow-right" size="28" color="#999" />
            </view>
          </view>
          <view class="flex items-center">
            <view class="flex-shrink-0 w-186">开发情况</view>
            <u-input v-model="item.content" class="flex-1" placeholder="请填写当前国家开发情况"
              :customStyle="{ padding: '0', fontSize: '28rpx' }" />
          </view>
        </view>
      </view>
      <!-- 重点开发市场（国家） -->
      <view class="py-3 text-40 c-#333 font-600">重点开发市场（国家）</view>
      <view class="card-grey">
        <view v-for="(item, index) in formData.key_market" :key="index">
          <view class="flex items-center py-3 u-border-bottom" @click="onCountryClick('key_market', index)">
            <view class="w-186">国家名称</view>
            <view class="flex-1 pr-1.5">{{ item.nation || '请选择国家' }}</view>
            <u-icon class="flex-shrink-0" name="arrow-right" size="28" color="#999" />
          </view>
          <view class="flex items-center py-3 u-border-bottom">
            <view class="w-186">开发情况</view>
            <u-input v-model="item.content" class="flex-1 pr-1.5" placeholder="请填写当前国家开发情况"
              :customStyle="{ fontSize: '28rpx' }" />
            <view class="flex-shrink-0 flex items-center" :class="[{ 'opacity-50 pointer-events-none': index == 0 }]"
              @click="onCountryDelete(index)">
              <u-icon name="close-circle-fill" color="#F4AF22" size="28" />
              <view class="ml-1.25 c-primary">删除</view>
            </view>
          </view>
        </view>
        <view class="flex justify-center items-center py-2.5" @click="onCountryAdd">
          <u-icon name="plus-circle-fill" color="#F4AF22" size="28" />
          <view class="ml-1.25 c-primary">添加国家</view>
        </view>
      </view>
      <!-- 市场活动计划 -->
      <view class="py-3 text-40 c-#333 font-600">市场活动计划</view>
      <view v-for="(item, index) in formData.plan" :key="index" class="card-grey mb-2.5">
        <view class="flex items-center py-3 u-border-bottom" @click="onDateSelect(index)">
          <view class="flex-shrink-0 w-186">月份</view>
          <view class="flex-1 flex items-center">
            <view class="pr-2 c-#999">{{ item.month ? `${item.month}月${item.day}月` : '请选择日期' }}</view>
            <u-icon name="arrow-right" size="28" color="#999" />
          </view>
        </view>
        <view class="flex items-center pt-3">
          <view class="flex-shrink-0 w-186">计划</view>
          <u-input v-model="item.content" class="flex-1" placeholder="请填写市场活动计划" :customStyle="{ fontSize: '28rpx' }" />
        </view>

        <view class="flex items-center pt-3">
        <view class="flex-shrink-0 w-186">完成情况</view>
        <u-radio-group v-model="item.status" @change="radioGroupChange" active-color="#F4AF22">
          <u-radio :name="1">已完成</u-radio>
          <u-radio :name="2">未完成</u-radio>
        </u-radio-group>
      </view>
      </view>
  
      <view class="flex justify-center items-center py-2.5 card-grey" @click="onActPlanAdd">
        <u-icon name="plus-circle-fill" color="#F4AF22" size="28" />
        <view class="ml-1.25 c-primary">添加市场活动计划</view>
      </view>
    </view>
    <view class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view>
    <u-picker v-model="state.showDatePicker" mode="time" :params="dateParams" confirm-color="#F4AF22"
      @confirm="onDateConfirm" />
  </view>
</template>
<script setup>
import { showToast, navigate } from '@/common/util/uni';
import { numFormat } from '@/common/util/format'
import { postCustomerPlanAdd } from '@/common/http/module/plan.js'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const emit = defineEmits(['confirm'])
const props = defineProps({
  data: Object
})

const state = reactive({
  actionParam: '',
  actionIndex: 0,
  showDatePicker: false
})

const formData = reactive({
  chargeUser: '',
  new_customer: '',
  new_customer_target: '',
  customer_channel: [{ content: '' }],
  core_market: [
    { nation: '', content: '' },
    { nation: '', content: '' },
    { nation: '', content: '' },
    { nation: '', content: '' },
    { nation: '', content: '' },
  ],
  key_market: [
    { nation: '', content: '' }
  ],
  plan: [
    { month: '',day:'', content: '',status:'' }
  ]
})

const currencyName = computed(() => planStore.currency?.label || '未添加')

const dateParams = { year: false, month: true, day: true }

watch(() => props.data, (val) => initFormData(val))

function initFormData(data) {
  if (!data) return
  formData.chargeUser = data.customer_planning
  formData.new_customer = data.new_customer > 0 ? data.new_customer : ''
  formData.new_customer_target = data.new_customer_target > 0 ? numFormat(data.new_customer_target) : ''
  if (data.customer_channel && data.customer_channel.length > 0) {
    formData.customer_channel = data.customer_channel
  }
  if (data.key_market && data.key_market.length > 0) {
    formData.key_market = data.key_market
  }
  if (data.core_market && data.core_market.length > 0) {
    formData.core_market = data.core_market
  }
  if (data.plan_list && data.plan_list.length > 0) {
    formData.plan = data.plan_list
  }
}

function onChargeUserClick() {
  const ids = formData.chargeUser?.user_id
  navigate(`/package_plan/pages/user/select?ids=${ids}&singleSelect=true`)
}

function onCustomerChannelAdd() {
  formData.customer_channel.push({ content: '' })
}

function onCustomerChannelDelete(index) {
  formData.customer_channel.splice(index, 1)
}

function onCountryAdd() {
  formData.key_market.push({ name: '', content: '' })
}

function onCountryDelete(index) {
  formData.key_market.splice(index, 1)
}

function onActPlanAdd() {
  formData.plan.push({ month: '',day:'', content: '',status:'' })
}

function onUserSelect(val) {
  formData.chargeUser = {
    user_id: val.user_id,
    nickname: val.user?.nickname
  }
}

function onCountryClick(param, index) {
  state.actionParam = param
  state.actionIndex = index
  navigate('/pages/country/select')
}

function onCountrySelected(val) {
  formData[state.actionParam][state.actionIndex].nation = val.name
}

function onDateSelect(index) {
  state.actionIndex = index
  state.showDatePicker = true
}

function onDateConfirm(e) {
  const month = e.month
  const day = e.day
  formData.plan[state.actionIndex].month = parseInt(month)
  formData.plan[state.actionIndex].day = parseInt(day)
}

function onSubmit() {
  // const isCoreMarketHasEmpty = formData.core_market.filter(item => !item.content).length > 0
  // if (isCoreMarketHasEmpty) {
  //   showToast('请填写完整现有核心市场内容')
  //   return
  // }

  const params = {
    club_id: userStore.currentSocietyId,
    year: planStore.year,
    customer_planning_charge: formData.chargeUser?.user_id || formData.chargeUser?.id,
    new_customer: formData.new_customer,
    new_customer_target: formData.new_customer_target,
    customer_channel: formData.customer_channel,
    core_market: formData.core_market,
    key_market: formData.key_market,
    plan: formData.plan
  }
  postCustomerPlanAdd(params).then(() => {
    showToast('保存成功')
    emit('confirm')
  })
}

onMounted(() => initFormData(props.data))

defineExpose({ onUserSelect, onCountrySelected })
</script>

<style lang="scss" scoped>
.card-grey {
  padding: 14rpx 16rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}
</style>
